   <!doctype html>
<html>
<head>
    <title>9420 工具箱</title>
    <meta  charset="utf-8">
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/animate.min.css" />
    <link rel="stylesheet" href="../css/appbase.css" />
    <link rel="stylesheet" href="../css/style.css" />

    <link rel="stylesheet" href="../plugins/layer/skin/default/layer.css">
    <link rel="stylesheet" href="../plugins/chosen/chosen.min.css" />

    <style>
        .thumbnail{
            height: 310px;
            margin-bottom: 30px;
            display: block;
            text-align: center;
            max-width: 270px;
            padding: 15px;
        }
        .thumbnail a.remove-tool{
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 14px;
            color: #eee;
            opacity: .1;
        }
        .thumbnail a.remove-tool:hover{
            opacity: .9;
            color: orangered;
        }

        .thumbnail a>img{
            margin: 0 auto;
            display: block;
            width: 100%;

            height: 130px;
        }
        .thumbnail .help{
            color: lightgreen;
        }
        .thumbnail .help a{
            color: lightsteelblue;
        }
        .thumbnail .help a:hover{
            text-decoration: none;
            color: #333;
        }
        .caption h3>a{
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .caption p{
            font-size: 15px;
            padding-top: 15px;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .tool-item>.thumbnail{
            position: relative;
        }
        .tool-item>.thumbnail>b{
            position: absolute;
            left: 5px;
            bottom: 2px;
        }

        .tool-item>.thumbnail>span{
            position: absolute;
            right: 5px;
            bottom: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row padding">
            <span  class="">功能数量:<b id="toolCount"></b></span>
            <button class="btn btn-white btn-sm" id="reloadConfig">重新加载配置</button>
            <button class="btn btn-primary btn-sm" id="addfunction">添加工具</button>
        </div>
        <div class="row">
            <ul id="tools">
            </ul>
        </div>

    </div>

    <!-- 添加功能区 -->
    <div class="open-dialog" id="fun">
        <div class="col-xs-12">
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="input-group input-group-sm">
                        <span  class="input-group-addon "><i class="fa fa-bicycle"></i></span>
                        <select name="toolname" id="toolselect" class="form-control ">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-bookmark"></i></span>
                        <input type="text" class="form-control" name="url" disabled/>
                    </div>
                </div>
                <div class="form-group">
                    <p class="form-control-static" style="font-size: 16px;" id="desc"></p>
                </div>
            </form>
        </div>

    </div>

  <script type="text/html" id="toolTemplate">
      <li class="col-xs-3 tool-item" key="{{key}}" url="{{url}}">
        <div class="thumbnail">
            <a class="" href="{{url}}" target="_blank">
                <img src="../images/{{logo}}">
            </a>
            <a href="javascript:void(0);" class="remove-tool" id="removetool"><i class="fa fa-times-circle "></i></a>
            <div class="caption">
                <h3>
                    <a href="{{url}}" target="_blank">{{title}}</a>
                    <small>{{author}}</small>
                </h3>
                <p title="{{desc}}">{{desc}}</p>
            </div>
            {{if help != null}}
            <p class="help"><a href="{{help}}" target="_blank">使用说明</a></p>
            {{/if}}
            <b class="totalCalls">{{totalCalls}}</b>
            <span class="lastCallTime">{{lastCallTime | dateFormat:'yyyy-MM-dd HH:mm:ss'}}</span>
        </div>
    </li>
  </script>

  <script type="text/javascript" src="../js/requirejs2.1.11-min.js"></script>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript">
      require([ 'bootstrap', 'index' ]);
  </script>
</body>
</html>